<template>
	<view class="content">
		<view class="gradient-bg">
			<!-- 渐变背景 -->
			<view class="list-card-wrap">
				<view class="flex-row-between" style="margin-bottom: 8rpx;">
					<view class="flex-row">
						<text class="white-text font-24">单据编号</text>
						<text class="white-text font-24" style="margin-left: 20rpx;">{{taskInfo.no}}</text>
					</view>
					<view class="tag-gray"></view>
				</view>
				<view class="list-card">
					<view class="">
						<text class="black-text-34">{{taskInfo.supplierName}}</text>
					</view>
					<view class="content-blue flex-row">
						<view class="flex-column flex1">
							<text class="gray-text">需求数量</text>
							<text class="black-text">{{taskInfo.totalQty}}</text>
						</view>
						<view class="split"></view>
						<view class="flex-column flex1">
							<text class="gray-text">收货总数</text>
							<text class="black-text">{{taskInfo.checkTotalQty}}</text>
						</view>
					</view>
					<view class="">
						<view class="flex-row-between">
							<text class="gray-text">创建时间</text>
							<text class="gray-text">{{taskInfo.createTime}}</text>
						</view>
						<view class="flex-row-between">
							<text class="gray-text">完成时间</text>
							<text class="gray-text">{{taskInfo.completeTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view scroll-y style="height: calc(100vh - 377rpx);"> -->
		<view scroll-x class="table-wrap">
			<zb-table :show-header="true" :columns="column" :fit="true" :border="true" :data="detailData">
			</zb-table>
		</view>
		<!-- </view> -->

	</view>
</template>

<script>
	
	import {
		getTaskInfoById,
		getBillProductList
	} from "./api"
	
	export default {
		onLoad(option) {
			this.taskId = option.id;
		  },
		  created() {
		  		this.getTaskDetail();
		  },
		data() {
			return {
				taskId:'',
				taskInfo:{},
				detailData:[],
				column: [
					{ type:'index', label: '序号', align: 'center', width:54 },
					{
						name: 'trayNo',
						label: '托盘号',
						sorter: false,
					},
					{
						name: 'productNo',
						label: '物料编号',
						fixed: false,
						emptyString: '--'
					},
					{
						name: 'productName',
						label: '物料',
						sorter: false,
					},
					{
						name: 'qty',
						label: '收货数量'
					},
				],
			}
		},
		methods:{
			getTaskDetail(){
				getTaskInfoById(this.taskId).then(res => {
					if (res.code == 200) {
						this.taskInfo = res.data
						// 继续查询收货任务明细
						getBillProductList({
							billNo:this.taskInfo.no,
						}).then(res => {
							if (res.code == 200) {
								this.detailData = res.rows;
							}else{
								res.msg && this.$modal.confirmClose(res.msg)
							}
						})
					}
				})
			},	
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style scoped>

</style>
